<%@ page contentType="text/html;charset=UTF-8" language="java"%>
<!doctype html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" > <!--<![endif]-->
<head>
</head>
<body>
<div style="min-height:510px;height:auto !important;" class="thumbnail">
    <div class="page-header">
        <h4 style="text-align: center">
            bootstrap中可用的图标集</h4>
         </div>
    <p>boostrap中 140个图标提供了深灰色（默认）和白色两种颜色
</p><pre class="brush:html;toolbar:false; prettyprint linenums prettyprinted" style=""><ol class="linenums"><li class="L0"><span class="com">//使用时</span></li><li class="L1"><span class="pun">&lt;</span><span class="pln">i </span><span class="kwd">class</span><span class="pun">=</span><span class="str">"icon-search"</span><span class="pun">&gt;&lt;/</span><span class="pln">i</span><span class="pun">&gt;</span></li><li class="L2"><span class="pun">&lt;</span><span class="pln">i </span><span class="kwd">class</span><span class="pun">=</span><span class="str">"icon-search icon-white"</span><span class="pun">&gt;&lt;/</span><span class="pln">i</span><span class="pun">&gt;</span></li></ol></pre><style>
.the-icons
  {
  list-style-type:none;
  }
.the-icons li
{
float: left;
width: 25%;
line-height: 25px;
display: list-item;
text-align: -webkit-match-parent;
}
</style><ul class="the-icons clearfix "><li><p><em class="icon-glass"></em> icon-glass</p></li><li><p><em class="icon-music"></em> icon-music</p></li><li><p><em class="icon-search"></em> icon-search</p></li><li><p><em class="icon-envelope"></em> icon-envelope</p></li><li><p><em class="icon-heart"></em> icon-heart</p></li><li><p><em class="icon-star"></em> icon-star</p></li><li><p><em class="icon-star-empty"></em> icon-star-empty</p></li><li><p><em class="icon-user"></em> icon-user</p></li><li><p><em class="icon-film"></em> icon-film</p></li><li><p><em class="icon-th-large"></em> icon-th-large</p></li><li><p><em class="icon-th"></em> icon-th</p></li><li><p><em class="icon-th-list"></em> icon-th-list</p></li><li><p><em class="icon-ok"></em> icon-ok</p></li><li><p><em class="icon-remove"></em> icon-remove</p></li><li><p><em class="icon-zoom-in"></em> icon-zoom-in</p></li><li><p><em class="icon-zoom-out"></em> icon-zoom-out</p></li><li><p><em class="icon-off"></em> icon-off</p></li><li><p><em class="icon-signal"></em> icon-signal</p></li><li><p><em class="icon-cog"></em> icon-cog</p></li><li><p><em class="icon-trash"></em> icon-trash</p></li><li><p><em class="icon-home"></em> icon-home</p></li><li><p><em class="icon-file"></em> icon-file</p></li><li><p><em class="icon-time"></em> icon-time</p></li><li><p><em class="icon-road"></em> icon-road</p></li><li><p><em class="icon-download-alt"></em> icon-download-alt</p></li><li><p><em class="icon-download"></em> icon-download</p></li><li><p><em class="icon-upload"></em> icon-upload</p></li><li><p><em class="icon-inbox"></em> icon-inbox</p></li><li><p><em class="icon-play-circle"></em> icon-play-circle</p></li><li><p><em class="icon-repeat"></em> icon-repeat</p></li><li><p><em class="icon-refresh"></em> icon-refresh</p></li><li><p><em class="icon-list-alt"></em> icon-list-alt</p></li><li><p><em class="icon-lock"></em> icon-lock</p></li><li><p><em class="icon-flag"></em> icon-flag</p></li><li><p><em class="icon-headphones"></em> icon-headphones</p></li><li><p><em class="icon-volume-off"></em> icon-volume-off</p></li><li><p><em class="icon-volume-down"></em> icon-volume-down</p></li><li><p><em class="icon-volume-up"></em> icon-volume-up</p></li><li><p><em class="icon-qrcode"></em> icon-qrcode</p></li><li><p><em class="icon-barcode"></em> icon-barcode</p></li><li><p><em class="icon-tag"></em> icon-tag</p></li><li><p><em class="icon-tags"></em> icon-tags</p></li><li><p><em class="icon-book"></em> icon-book</p></li><li><p><em class="icon-bookmark"></em> icon-bookmark</p></li><li><p><em class="icon-print"></em> icon-print</p></li><li><p><em class="icon-camera"></em> icon-camera</p></li><li><p><em class="icon-font"></em> icon-font</p></li><li><p><em class="icon-bold"></em> icon-bold</p></li><li><p><em class="icon-italic"></em> icon-italic</p></li><li><p><em class="icon-text-height"></em> icon-text-height</p></li><li><p><em class="icon-text-width"></em> icon-text-width</p></li><li><p><em class="icon-align-left"></em> icon-align-left</p></li><li><p><em class="icon-align-center"></em> icon-align-center</p></li><li><p><em class="icon-align-right"></em> icon-align-right</p></li><li><p><em class="icon-align-justify"></em> icon-align-justify</p></li><li><p><em class="icon-list"></em> icon-list</p></li><li><p><em class="icon-indent-left"></em> icon-indent-left</p></li><li><p><em class="icon-indent-right"></em> icon-indent-right</p></li><li><p><em class="icon-facetime-video"></em> icon-facetime-video</p></li><li><p><em class="icon-picture"></em> icon-picture</p></li><li><p><em class="icon-pencil"></em> icon-pencil</p></li><li><p><em class="icon-map-marker"></em> icon-map-marker</p></li><li><p><em class="icon-adjust"></em> icon-adjust</p></li><li><p><em class="icon-tint"></em> icon-tint</p></li><li><p><em class="icon-edit"></em> icon-edit</p></li><li><p><em class="icon-share"></em> icon-share</p></li><li><p><em class="icon-check"></em> icon-check</p></li><li><p><em class="icon-move"></em> icon-move</p></li><li><p><em class="icon-step-backward"></em> icon-step-backward</p></li><li><p><em class="icon-fast-backward"></em> icon-fast-backward</p></li><li><p><em class="icon-backward"></em> icon-backward</p></li><li><p><em class="icon-play"></em> icon-play</p></li><li><p><em class="icon-pause"></em> icon-pause</p></li><li><p><em class="icon-stop"></em> icon-stop</p></li><li><p><em class="icon-forward"></em> icon-forward</p></li><li><p><em class="icon-fast-forward"></em> icon-fast-forward</p></li><li><p><em class="icon-step-forward"></em> icon-step-forward</p></li><li><p><em class="icon-eject"></em> icon-eject</p></li><li><p><em class="icon-chevron-left"></em> icon-chevron-left</p></li><li><p><em class="icon-chevron-right"></em> icon-chevron-right</p></li><li><p><em class="icon-plus-sign"></em> icon-plus-sign</p></li><li><p><em class="icon-minus-sign"></em> icon-minus-sign</p></li><li><p><em class="icon-remove-sign"></em> icon-remove-sign</p></li><li><p><em class="icon-ok-sign"></em> icon-ok-sign</p></li><li><p><em class="icon-question-sign"></em> icon-question-sign</p></li><li><p><em class="icon-info-sign"></em> icon-info-sign</p></li><li><p><em class="icon-screenshot"></em> icon-screenshot</p></li><li><p><em class="icon-remove-circle"></em> icon-remove-circle</p></li><li><p><em class="icon-ok-circle"></em> icon-ok-circle</p></li><li><p><em class="icon-ban-circle"></em> icon-ban-circle</p></li><li><p><em class="icon-arrow-left"></em> icon-arrow-left</p></li><li><p><em class="icon-arrow-right"></em> icon-arrow-right</p></li><li><p><em class="icon-arrow-up"></em> icon-arrow-up</p></li><li><p><em class="icon-arrow-down"></em> icon-arrow-down</p></li><li><p><em class="icon-share-alt"></em> icon-share-alt</p></li><li><p><em class="icon-resize-full"></em> icon-resize-full</p></li><li><p><em class="icon-resize-small"></em> icon-resize-small</p></li><li><p><em class="icon-plus"></em> icon-plus</p></li><li><p><em class="icon-minus"></em> icon-minus</p></li><li><p><em class="icon-asterisk"></em> icon-asterisk</p></li><li><p><em class="icon-exclamation-sign"></em> icon-exclamation-sign</p></li><li><p><em class="icon-gift"></em> icon-gift</p></li><li><p><em class="icon-leaf"></em> icon-leaf</p></li><li><p><em class="icon-fire"></em> icon-fire</p></li><li><p><em class="icon-eye-open"></em> icon-eye-open</p></li><li><p><em class="icon-eye-close"></em> icon-eye-close</p></li><li><p><em class="icon-warning-sign"></em> icon-warning-sign</p></li><li><p><em class="icon-plane"></em> icon-plane</p></li><li><p><em class="icon-calendar"></em> icon-calendar</p></li><li><p><em class="icon-random"></em> icon-random</p></li><li><p><em class="icon-comment"></em> icon-comment</p></li><li><p><em class="icon-magnet"></em> icon-magnet</p></li><li><p><em class="icon-chevron-up"></em> icon-chevron-up</p></li><li><p><em class="icon-chevron-down"></em> icon-chevron-down</p></li><li><p><em class="icon-retweet"></em> icon-retweet</p></li><li><p><em class="icon-shopping-cart"></em> icon-shopping-cart</p></li><li><p><em class="icon-folder-close"></em> icon-folder-close</p></li><li><p><em class="icon-folder-open"></em> icon-folder-open</p></li><li><p><em class="icon-resize-vertical"></em> icon-resize-vertical</p></li><li><p><em class="icon-resize-horizontal"></em> icon-resize-horizontal</p></li><li><p><em class="icon-hdd"></em> icon-hdd</p></li><li><p><em class="icon-bullhorn"></em> icon-bullhorn</p></li><li><p><em class="icon-bell"></em> icon-bell</p></li><li><p><em class="icon-certificate"></em> icon-certificate</p></li><li><p><em class="icon-thumbs-up"></em> icon-thumbs-up</p></li><li><p><em class="icon-thumbs-down"></em> icon-thumbs-down</p></li><li><p><em class="icon-hand-right"></em> icon-hand-right</p></li><li><p><em class="icon-hand-left"></em> icon-hand-left</p></li><li><p><em class="icon-hand-up"></em> icon-hand-up</p></li><li><p><em class="icon-hand-down"></em> icon-hand-down</p></li><li><p><em class="icon-circle-arrow-right"></em> icon-circle-arrow-right</p></li><li><p><em class="icon-circle-arrow-left"></em> icon-circle-arrow-left</p></li><li><p><em class="icon-circle-arrow-up"></em> icon-circle-arrow-up</p></li><li><p><em class="icon-circle-arrow-down"></em> icon-circle-arrow-down</p></li><li><p><em class="icon-globe"></em> icon-globe</p></li><li><p><em class="icon-wrench"></em> icon-wrench</p></li><li><p><em class="icon-tasks"></em> icon-tasks</p></li><li><p><em class="icon-filter"></em> icon-filter</p></li><li><p><em class="icon-briefcase"></em> icon-briefcase</p></li><li><p><em class="icon-fullscreen"></em> icon-fullscreen</p></li></ul>
</div>
</body>
</html>